<!doctype html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">

<div th:replace="~{admin/component/head::head}"></div>

<body>

<div th:replace="~{admin/component/header::header}"></div>

<div class="container-fluid">
  <div class="row">

    <div th:replace="~{admin/component/nav::nav}"></div>

    <main id="app" class="col-md-9 ms-sm-auto col-lg-10 px-md-4 p-4">

      <div class="table-responsive mt-3 text-center">
        <table class="table table-striped">
          <thead>
          <tr>
            <th scope="col">ID</th>
            <th scope="col">会员ID</th>
            <th scope="col">账户金额</th>
            <th scope="col">版本号</th>
            <th scope="col">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="account in accounts" :key="account.id">
            <td>{{account.id}}</td>
            <td>{{account.memberId}}</td>
            <td>{{account.amount}}</td>
            <td>{{account.version}}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm m-1" data-bs-toggle="modal"
                      data-bs-target="#accountLogModal" @click="openAccountLogModal(account)">变更记录
              </button>
              <button type="button" class="btn btn-primary btn-sm m-1" data-bs-toggle="modal"
                      data-bs-target="#changeModal" @click="openChangeModal(account)">调账
              </button>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="modal fade" id="accountLogModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">账户变更记录</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="table-responsive mt-3 text-center">
                  <table class="table table-striped">
                    <thead>
                    <tr>
                      <th scope="col">发生时间</th>
                      <th scope="col">变更前</th>
                      <th scope="col">变更</th>
                      <th scope="col">变更后</th>
                      <th scope="col">描述</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="log in accountLogs" :key="log.id">
                      <td>{{log.time}}</td>
                      <td>{{log.amountBefore}}</td>
                      <td>{{log.amount}}</td>
                      <td>{{log.amountAfter}}</td>
                      <td>{{log.desc}}</td>
                    </tr>
                    </tbody>
                  </table>
                </div>

                <!--<div>{{ accounts }}</div>-->
                <page @change-page='queryAccountLogList' :pagesize='paginationLog.pageSize' :total='paginationLog.total' :page='paginationLog.current' />

              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">确认</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 调账Modal -->
        <div class="modal fade" id="changeModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">调账</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <div class="row mb-3">
                  <label class="col-sm-3 col-form-label col-form-label-sm">会员</label>
                  <div class="col-sm-9">
                    <input v-model="change.memberId" readonly class="form-control-plaintext" >
                  </div>
                </div>
                <div class="row mb-3">
                  <label class="col-sm-3 col-form-label">金额</label>
                  <div class="col-sm-9">
                    <input v-model="change.amount" class="form-control">
                  </div>
                </div>
                <div class="row">
                  <label class="col-sm-3 col-form-label">变更原因</label>
                  <div class="col-sm-9">
                    <input v-model="change.desc" class="form-control">
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="doChange">确认</button>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!--<div>{{ accounts }}</div>-->
      <page @change-page='queryAccountList' :pagesize='pagination.pageSize' :total='pagination.total' :page='pagination.current' />

    </main>
  </div>

</div>

<script>
  // 下面这行声明在一个页面只能有一次，header里已经有了，所以这里去掉
  // const {createApp, ref} = Vue;
  const app = createApp({
    components: {
      page
    },
    setup() {
      const accounts = ref();
      const pagination = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });

      const queryAccountList = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        axios.get("/system/admin/account/query-list", {
          params: {
            page: current,
            size: pagination.value.pageSize
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            accounts.value = data.content.list;
            // 设置分页控件的值
            pagination.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      // ------------ 账户变更列表 -------------

      const accountLogs = ref();
      accountLogs.value = [];
      const account = ref();
      const paginationLog = ref({
        current: 1,
        pageSize: 5,
        total: 0
      });

      const openAccountLogModal = function (row) {
        account.value = row;
        queryAccountLogList(1);
      };

      const queryAccountLogList = function (current) {
        if (Tool.isEmpty(current)) {
          current = 1;
        }
        axios.get("/system/admin/account-log/query-list", {
          params: {
            page: current,
            size: paginationLog.value.pageSize,
            memberId: account.value.memberId
          }
        }).then((response) => {
          const data = response.data;
          if (data.success) {
            accountLogs.value = data.content.list;
            // 设置分页控件的值
            paginationLog.value.total = Number(data.content.total);
          } else {
            Msg.error(data.message);
          }
        });
      };

      // -------- 调账 ---------
      const change = ref();
      change.value = {};

      const openChangeModal = (record) => {
        change.value = {
          memberId: record.memberId
        };
      };

      const doChange = () => {
        axios.post('/system/admin/account/change', change.value).then((response) => {
          const data = response.data;
          if (data.success) {
            queryAccountList(pagination.value.current);
          } else {
            Msg.error(data.message);
          }
        });
      };

      onMounted(() => {
        queryAccountList();
      });

      return {
        accounts,
        pagination,
        queryAccountList,
        queryAccountLogList,
        paginationLog,
        openAccountLogModal,
        accountLogs,
        change,
        openChangeModal,
        doChange
      }
    }
  });
  app.mount("#app");
</script>

</body>
</html>
